<!--<template>-->
<!--  <div>-->
<!--    <div class="chat-window">-->
<!--      <div v-for="(message, index) in messages" :key="index" class="chat-message">-->
<!--        {{ message }}-->
<!--      </div>-->
<!--    </div>-->
<!--    <input v-model="message" @keyup.enter="send" placeholder="Type a message" class="chat-input">-->
<!--    <button @click="join">Join</button>-->
<!--    <button @click="exit">Exit</button>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      url: 'ws://localhost:8080/websocket/chat',-->
<!--      ws: null,-->
<!--      message: '',-->
<!--      messages: []-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    join() {-->
<!--      const wsuri = this.url;-->
<!--      this.ws = new WebSocket(wsuri);-->
<!--      const self = this;-->
<!--      this.ws.onopen = function (event) {-->
<!--        self.messages.push("已经打开连接!");-->
<!--      };-->
<!--      this.ws.onmessage = function (event) {-->
<!--        self.messages.push(event.data);-->
<!--      };-->
<!--      this.ws.onclose = function (event) {-->
<!--        self.messages.push("已经关闭连接!");-->
<!--      };-->
<!--    },-->
<!--    exit() {-->
<!--      if (this.ws) {-->
<!--        this.ws.close();-->
<!--        this.ws = null;-->
<!--      }-->
<!--    },-->
<!--    send() {-->
<!--      if (this.ws) {-->
<!--        this.ws.send(this.message);-->
<!--        this.message = '';-->
<!--      } else {-->
<!--        alert("未连接到服务器");-->
<!--      }-->
<!--    },-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style>-->
<!--.chat-window {-->
<!--  border: 1px solid #ccc;-->
<!--  padding: 10px;-->
<!--  height: 300px;-->
<!--  overflow-y: scroll;-->
<!--}-->

<!--.chat-message {-->
<!--  margin-bottom: 10px;-->
<!--}-->

<!--.chat-input {-->
<!--  width: calc(100% - 100px);-->
<!--  margin-right: 10px;-->
<!--}-->
<!--</style>-->
<template>
  <div id="app">
    <h3>WebSocket测试，客户端接收到的消息如下：</h3>
    <textarea v-model="messages" readonly cols="150" rows="30"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: '',
      socket: null,
    }
  },
  created() {
    this.initWebSocket();
  },
  methods: {
    initWebSocket() {
      if (!("WebSocket" in window)) {
        console.log("遗憾：您的浏览器不支持WebSocket");
      } else {
        console.log("恭喜：您的浏览器支持WebSocket");

        // 实例化WebSocket对象，指定要连接的服务器地址与端口建立连接
        this.socket = new WebSocket("ws://localhost:8080/websocket/chat");

        // 连接打开事件
        this.socket.onopen = () => {
          console.log("Socket 已打开");
          this.socket.send("消息发送测试(From Client)");
        };

        // 收到消息事件
        this.socket.onmessage = (msg) => {
          this.messages += msg.data + "\n";
          console.log(msg.data);
        };

        // 连接关闭事件
        this.socket.onclose = () => {
          console.log("Socket已关闭");
        };

        // 发生了错误事件
        this.socket.onerror = () => {
          alert("Socket发生了错误");
        };

        // 窗口关闭时，关闭连接
        window.addEventListener('beforeunload', () => {
          this.socket.close();
        });
      }
    }
  }
}
</script>

<style>
h3 {
  text-align: center;
}
textarea {
  width: 100%;
  margin: 20px 0;
}
</style>
